// src/pages/record/InspectionRecord.vue
<template>
	<div class="inspection-record">
		<el-card>
			<template #header>
				<div class="header-bar">
					<span>巡检记录</span>
					<div class="header-actions">
						<el-button type="primary" size="small" @click="openDialog('add')">新增记录</el-button>
						<el-button size="small" @click="exportCSV">导出</el-button>
					</div>
				</div>
			</template>

			<el-form :inline="true" :model="filters" class="mb-2">
				<el-form-item label="所属部门">
					<el-input v-model="filters.department" />
				</el-form-item>
				<el-form-item label="计划名称">
					<el-input v-model="filters.plan" />
				</el-form-item>
				<el-form-item label="巡检人员">
					<el-input v-model="filters.person" />
				</el-form-item>
				<el-form-item label="设备点位">
					<el-input v-model="filters.device" />
				</el-form-item>
				<el-form-item label="巡检时间">
					<el-date-picker v-model="filters.range" type="daterange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="search">搜索</el-button>
					<el-button @click="reset">重置</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="filteredList" border stripe>
				<el-table-column prop="id" label="编号" width="100" />
				<el-table-column prop="department" label="所属部门" />
				<el-table-column prop="plan" label="计划名称" />
				<el-table-column prop="person" label="巡检人员" />
				<el-table-column prop="device" label="设备点位" />
				<el-table-column prop="result" label="巡检情况" />
				<el-table-column prop="desc" label="异常描述" />
				<el-table-column prop="time" label="巡检时间" width="160" />
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteRow(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="所属部门">
					<el-input v-model="form.department" />
				</el-form-item>
				<el-form-item label="计划名称">
					<el-input v-model="form.plan" />
				</el-form-item>
				<el-form-item label="巡检人员">
					<el-input v-model="form.person" />
				</el-form-item>
				<el-form-item label="设备点位">
					<el-input v-model="form.device" />
				</el-form-item>
				<el-form-item label="巡检情况">
					<el-radio-group v-model="form.result">
						<el-radio label="正常" />
						<el-radio label="异常" />
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="form.result === '异常'" label="异常描述">
					<el-input type="textarea" v-model="form.desc" />
				</el-form-item>
				<el-form-item label="巡检时间">
					<el-date-picker v-model="form.time" type="datetime" style="width: 100%" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

export default {
	setup() {
		const list = ref([
			...Array.from({ length: 10 }).map((_, i) => ({
				id: `XJ00${i + 1}`,
				department: ['生产部', '设备部', '质检部'][i % 3],
				plan: `巡检计划 ${i + 1}`,
				person: ['张三', '李四', '王五'][i % 3],
				device: `点位-${i + 1}`,
				result: i % 4 === 0 ? '异常' : '正常',
				desc: i % 4 === 0 ? '发现轻微漏油' : '',
				time: dayjs().subtract(i, 'day').format('YYYY-MM-DD HH:mm')
			}))
		])

		const filters = ref({ department: '', plan: '', person: '', device: '', range: '' })
		const dialogVisible = ref(false)
		const dialogTitle = ref('')
		const form = ref({})
		const currentIndex = ref(-1)

		const filteredList = computed(() => {
			return list.value.filter(item => {
				const f = filters.value
				const matchText = [
					!f.department || item.department.includes(f.department),
					!f.plan || item.plan.includes(f.plan),
					!f.person || item.person.includes(f.person),
					!f.device || item.device.includes(f.device),
					!f.range || (dayjs(item.time).isAfter(f.range[0]) && dayjs(item.time).isBefore(f.range[1]))
				]
				return matchText.every(Boolean)
			})
		})

		const openDialog = (type, row) => {
			dialogTitle.value = type === 'add' ? '新增巡检记录' : '编辑巡检记录'
			dialogVisible.value = true
			if (type === 'edit') {
				form.value = { ...row }
				currentIndex.value = list.value.findIndex(i => i.id === row.id)
			} else {
				form.value = {
					id: `XJ${Date.now().toString().slice(-5)}`,
					department: '', plan: '', person: '', device: '', result: '正常', desc: '', time: dayjs().format('YYYY-MM-DD HH:mm')
				}
				currentIndex.value = -1
			}
		}

		const submitForm = () => {
			const record = { ...form.value, time: dayjs(form.value.time).format('YYYY-MM-DD HH:mm') }
			if (currentIndex.value >= 0) {
				list.value[currentIndex.value] = record
			} else {
				list.value.push(record)
			}
			dialogVisible.value = false
		}

		const deleteRow = (row) => {
			list.value = list.value.filter(i => i.id !== row.id)
		}

		const search = () => { }
		const reset = () => { filters.value = { department: '', plan: '', person: '', device: '', range: '' } }

		const exportCSV = () => {
			const rows = filteredList.value.map(item => [
				item.department,
				item.plan,
				item.person,
				item.device,
				item.status,
				item.desc || '',
				item.time
			])
			const header = ['所属部门', '计划名称', '巡检人员', '设备点位', '状态', '异常描述', '巡检时间']
			const csvContent = [header, ...rows].map(e => e.join(',')).join('\n')
			const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' })
			const link = document.createElement('a')
			link.href = URL.createObjectURL(blob)
			link.download = '巡检记录.csv'
			link.click()
		}


		return {
			list,
			filters,
			filteredList,
			dialogVisible,
			dialogTitle,
			form,
			openDialog,
			submitForm,
			deleteRow,
			search,
			reset,
			exportCSV
		}
	}
}
</script>

<style scoped>
.inspection-record {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}

.header-actions {
	display: flex;
	gap: 8px;
	/* 控制按钮间距 */
}

/* 保持原有其他样式 */
.quality-record {
	padding: 20px;
}
</style>
